﻿@{
    ViewBag.Title = "อิฐบล็อค";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<script src="../../Content/Flash/js/swfobject.js" type="text/javascript"></script>
@*<script src="../../Content/colorPicker/jquery.ui.colorPicker.min.js" type="text/javascript"></script>
<link href="../../Content/colorPicker/css/jquery.ui.colorPicker.css" rel="stylesheet" type="text/css" />*@
<script src="../../Content/colorPicker/izzyColor.js" type="text/javascript"></script>

<div class="form-horizontal" >
    <h2>อิฐบล็อค</h2>
        <legend>จัดการข้อมูลอิฐบล็อค</legend>
        <div class="control-group">
            <label class="control-label" for="input01">ชื่ออิฐบล็อค</label>
            <div class="controls">
                <input type="text" class="input-xlarge" id="txtBlock"/> &nbsp;<input id="btnSearchBlock" type="button" class="btn btn-primary" value="ค้นหา"></input>
               
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="input01">ซีรีส์</label>
            <div class="controls">           
                @Html.DropDownList("drpBlock", ViewBag.Dropdown as SelectList, new { onchange = "selectSeries();" })
            </div>
        </div>
        <div class="control-group">
            <table id="grdBlock"></table>
            <div id="pager"></div>
        </div>

        <!-- Dialog -->
        <div id="dialog-modal" title="Block : " class="form-horizontal">
            <div class="control-group">
                <label class="control-label" for="txtBlockName">ชื่ออิฐบล็อค :</label>
                <div class="controls">
                    <input type="text" class="input-xlarge" id="txtBlockName" />
                </div>
            </div>            
            <div class="control-group">
                <label class="control-label" for="txtSeriesName">ซีรีย์ :</label>
                <div class="controls">
                    @*<input type="text" id="txtSeriesName"/>*@
                    @Html.DropDownList("drpBlockSeries", ViewBag.SelectedDropdown as SelectList)
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="lblDescription">รายละเอียด :</label>
                <div class="controls">
                    <label id="lblDescription"/>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="imgBlock">รูป :</label>
                <div class="controls">
                    <img id="imgBlock" src="#" width="50" height="50" alt="Alternate Text" />
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="imgDesign">Design :</label>
                <div class="controls">
                    <img id="imgDesign" src="#" width="50" height="50" alt="Click to edit" />
                    <input id="btnEditBlockDesign" type="button" class="btn btn-primary" value="แก้ไข"/>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="imgDesign">Color :</label>
                <div class="controls">
                    @*<div id="picker">
                      <input type="text" id="colorpicker">
                    </div>*@
                    <input type="text" value="#CCCC66" class="izzyColor" id="color1">
                </div>
            </div>
            <div class="control-group">
                <div class="controls">
                </div>
                <div class="controls">
                    <button type="submit" class="btn btn-primary">OK</button>&nbsp;&nbsp;
                    <button type="button" class="btn btn-primary" onclick="$('#dialog-modal').dialog('close');">cancel</button>
                </div>
            </div>
            <div id='dialog-designer' title="Modal">        
            </div>
        </div>


</div>

<script type="text/javascript">

    var imageUrl = "../../Content/colorPicker/editor_images/color.png";
    $(document).ready(function () {
        initialGrid();

        $("#btnSearchBlock").click(function () {
            doSearch();
        });
        $("#dialog-modal").dialog({
            autoOpen: false,
            height: 140,
            modal: true
        });
    });
    function doSearch() {

        var keyword = $("#txtBlock").val();
        var selectedValue = $("#drpBlock").val();

        var params = {
            keyword: keyword, seriesId: selectedValue
        };

        $('#grdBlock').jqGrid('clearGridData');
        $('#grdBlock').setGridParam({ url: '/Block/GetBlocksByKeywordOrSeries', postData: params }).trigger('reloadGrid');

    }
    function selectSeries() {
        var selectedValue = $("#drpBlock").val();
        var selectedText = $("#drpBlock option:selected").text();
        var params = {
            seriesId: selectedValue
        };
        $('#grdBlock').jqGrid('clearGridData');
        $('#grdBlock').setGridParam({ url: '/Block/GetBlocksByKeywordOrSeries', postData: params }).trigger('reloadGrid');
    }

    function initialGrid() {

        var updateDialog = {
            url: '/Block/Update'
                , closeAfterAdd: true
                , closeAfterEdit: true
                , afterShowForm: function (formId) {

                }
                , afterclickPgButtons: function (whichbutton, formid, rowid) {

                }
                , modal: true

                , onclickSubmit: function (params) {
                    var ajaxData = {};

                    var list = $("#grdBlock");
                    var selectedRow = list.getGridParam("selrow");
                    var rowData = list.getRowData(selectedRow);
                    ajaxData = { block_id: rowData.block_id, blockTypeId: rowData.block_type_id };

                    return ajaxData;
                }
                , width: "550"
        };

        $.jgrid.nav.addtext = "";
        $.jgrid.nav.edittext = "";
        $.jgrid.nav.deltext = "";
        $.jgrid.edit.addCaption = "เพิ่มลุกค้า";
        $.jgrid.edit.editCaption = "แก้ไขลุกค้า";
        $.jgrid.del.caption = "ต้องการลบรายการนี้หรือไม่?";
        $.jgrid.del.msg = "ต้องการลบรายการนี้หรือไม่?";


        $("#grdBlock").jqGrid({
            url: '/Block/GetBlocks',
            datatype: 'json',
            mtype: 'POST',
            colNames: ['Block Id', 'ชื่อ', 'series_id', 'รายละเอียด', 'ขนาด', 'กว้าง', 'ยาว', 'ลึก', 'น้ำหนักที่รับได้', 'รูป', 'วันที่สร้าง'],
            colModel: [
                    { name: 'block_id', index: 'block_id', width: 40, align: 'left', key: true, editable: true, editrules: { edithidden: false }, hidden: true },
                    { name: 'block_name', index: 'block_name', width: 40, align: 'left', key: false},
                    { name: 'series_id', index: 'series_id', width: 40, align: 'left', key: false, hidden: true },
                    { name: 'block_description', index: 'block_description', width: 40, align: 'left', key: false, hidden: true},                    
                    { name: 'block_size', index: 'block_size', width: 40, align: 'left', key: false, editable: false, edittype: 'text', editrules: { required: true} },
                    { name: 'block_width', index: 'block_width', width: 40, align: 'left',  key: true, editable: true, editrules: { edithidden: false }, hidden: true },
                    { name: 'block_height', index: 'block_height', width: 40, align: 'left',  key: true, editable: true, editrules: { edithidden: false }, hidden: true },
                    { name: 'block_depth', index: 'block_depth', width: 40, align: 'left', key: true, editable: true, editrules: { edithidden: false }, hidden: true },
                    { name: 'block_weight_limit', index: 'block_weight_limit', width: 40, align: 'left', key: false, editable: true, edittype: 'text', editrules: { required: true} },
                    { name: 'block_outlint_url', index: 'block_outlint_url', width: 40, align: 'left', key: false, editable: true, edittype: 'textarea', editrules: { required: true }, formatter: imageFormat },
                    { name: 'block_create_date', index: 'block_create_date', width: 40, align: 'left', key: false, editable: true, edittype: 'text', editrules: { required: true} },
                    ],
            pager: $('#pager'),
            rowNum: 10,
            width: 850,
            height:250,
            rownumbers: true,
            multiselect: false,
            sortname: 'block_create_date',
            sortorder: "desc",
            imgpath: 'Content/images',
            viewrecords: true,
            shrinkToFit: true,
            caption: '<span>รายการอิฐบล็อค</span>',
            autowidth: true
        }).navGrid('#pager',
            {
                edit: true, add: true, del: true, search: false, refresh: true
            }, updateDialog,
            updateDialog,
            updateDialog
        );

        $("#grdBlock").jqGrid('setGridParam', { ondblClickRow: function (rowid, iRow, iCol, e) {
            var data = $('#grdBlock').getRowData(rowid);
            openBlockDetailsDialog(data);
            } 
        });
    }
    function openBlockDetailsDialog(data) {
        $("#txtBlockName").val(data.block_name);
        //$("#txtSeriesName").val(callService(data.series_id));
        $("#drpBlockSeries").val(data.series_id);
        setSeriesName(data.series_id);
        $("#lblDescription").text(data.block_description);
        var options = {
            title: data.block_name,
            autoOpen: false,
            width: 700,
            height: 530,
            modal: true,
            resizable:false,
            show: "slide",
            hide:"slide"
        };
        $("#dialog-modal").dialog(options);
        $("#dialog-modal").dialog("open");
        $("#btnEditBlockDesign").click(function () {
            blockDesign();
        });

        //---Initial ColorPicker
//        $('#colorpicker').colorPicker({
//            colorChange: function (e, ui) {
//                $('body').css({
//                    backgroundColor: ui.color
//                })
//            }
//        });
//        $('#colorpicker').colorPicker('setColor', 75, 80, 65, 0.9);

//        $('em#formats a').click(function () {
//            var format = $(this).attr('title').toLowerCase();
//            $('#colorpicker').colorPicker('option', 'format', format);
//        })
        //---------------------
        return false;
    }
    function imageFormat(cellvalue, options, rowObject) {
        return '<img src=' + rowObject[9] + ' width="50" height="50"/>'; // block_outline_url
    }

    function blockDesign() {
        showDialog("");
    }

    function showDialog(uniqueName) {
        $("#dialog-designer").load('../Block/BlockDesigner').dialog({
            autoOpen: false,
            resizable: true,
            height: 600,
            width: 1000,
            modal: true
        });

        $('#dialog-designer').dialog('open');
        return false;
    }

    function setSeriesName(serieId) {
        $.ajax({
            type: "POST",
            url: "/Block/GetSeriesName",
            data: "{series_id:\"" + serieId + "\"}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: true,
            cache: false,
            success: function (result, status, xhr) {
                if (result.isPass == false) {
                    $("#txtErrorMessage").text(result.iMessage);
                }
                else {
                    //$("#txtSeriesName").val(result.series_name);
                }
            },
            error: function (xhr, status, error) {
                var err = eval("(" + xhr.responseText + ")");
                alert(err.Message);
            }
        });
    }
</script>